<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>百度地图API-批量地址解译</title>
    <link href="css/Baidu.css" rel="stylesheet" type="text/css" />
</head>

<body tabindex="1" id="body">
    <input type="button" onclick="callbackdata()" id="getpoi" value="获取截图"></input>
    <a id="down1" class="down1" href="" download="downImg">
        <span id="downImg"></span>
    </a>
    <div id="l-map" class="l-map"></div>
    <div class="uploadImg" id="uploadImg">
    </div>
</body>

</html>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/import.js"></script>
<script type="text/javascript" src="js/export.js"></script>
<script type="text/javascript" src="js/mymap.js"></script>
<!-- <script type="text/javascript" src="js/canvas2image.js"></script> -->
<!-- <script type="text/javascript" src="js/xlsx.core.min.js"></script> -->
<script src="https://cdn.bootcss.com/xlsx/0.11.9/xlsx.core.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- https://cdn.bootcss.com/xlsx/0.12.7/xlsx.js -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4&ak=PPDuSsbu2kdqP0o7WzvXQn1dB0NNzu4l"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=PPDuSsbu2kdqP0o7WzvXQn1dB0NNzu4l"></script>
<script type="text/javascript">
    initMap();
    setLatLonPosition();

    // function getImage(imageName) {
    //     var canvas = document.getElementById("l-map");
    //     var width = canvas.offsetWidth; //dom宽
    //     var height = canvas.offsetHeight; //dom高
    //     if (imageName == null) {
    //         var imageName = 'download.png';
    //     }
    //     var imgName = imageName;
    //     html2canvas(canvas, {
    //         scale: 2, //缩放比例,默认为1
    //         allowTaint: false, //是否允许跨域图像污染画布
    //         // foreignObjectRendering: true,
    //         useCORS: true, //是否尝试使用CORS从服务器加载图像
    //         width: width, //画布的宽度
    //         height: height, //画布的高度
    //     }).then((canvas) => {
    //         //将canvas转为base64格式
    //         var imgUri = canvas.toDataURL("image/png"); //图片格式
    //         // 把url放到我们的a标签中，并得到a标签对象
    //         // var triggerHref = $("#saveImg").attr("href", imgUri).attr("download" + '.png');
    //         $("#down1").attr("href", imgUri);
    //         $("#down1").attr("download", imgName);
    //         // triggerDownload.click(); //模拟点击！
    //         document.getElementById("downImg").click();
    //     });
    //     if (imageName != null) {
    //         i++;
    //         if (i < mypoints.length) {
    //             setTimeout(getallImage(i), 10000);
    //         }
    //     }
    // }
    //  byh 截取图片 主方法 直接调用
    callbackdata = function() {
        PrtScn("l-map").then((result) => {
            //下载图片
            download(result);
        });
    }

    /* 截图核心方法封装，获取base64 */
    function PrtScn(Name) {
        domName = document.getElementById(Name)
        let domIsNull = document.getElementById(Name);
        // svg转canvas
        let nodesToRecover = [];
        let nodesToRemove = [];
        let svgElem;
        svgElem = document.getElementById(Name).getElementsByTagName('svg');
        let prepare = [];
        for (let i = 0; i < svgElem.length; i++) {
            prepare.push(0);
        }
        for (let i = 0; i < svgElem.length; i++) {
            let parentNode = svgElem[i].parentNode;
            let canvas = document.createElement('canvas');
            canvas.style.position = svgElem[i].style.position;
            canvas.width = parseInt(svgElem[i].style.width);
            canvas.height = parseInt(svgElem[i].style.height);
            canvas.style.left = 0;
            canvas.style.top = 0; // 生成与svg对应尺寸的canvas
            let ctx = canvas.getContext('2d');
            let svg_xml = (new XMLSerializer()).serializeToString(svgElem[i]);
            let img = new Image();
            img.src = "data:image/svg+xml;base64," + window.btoa(svg_xml);
            img.onload = function() {
                ctx.drawImage(img, 0, 0);
                prepare[i] = 1;
                //download(canvas.toDataURL("image/png")); // 调试用
            }
            parentNode.appendChild(canvas); // 使用canvas代替svg进行截图
            nodesToRemove.push({ // 完成截图后删除canvas
                parent: parentNode,
                child: canvas
            });
            nodesToRecover.push({ // 完成截图后恢复svg
                parent: parentNode,
                child: svgElem[i]
            });
            parentNode.removeChild(svgElem[i]); // 暂时移除svg
        }
        return new Promise((resolve) => {
            let waitInterval = setInterval(() => {
                let isComplete = true; // 创建定时器，等待上面img.onload的异步操作
                for (let i = 0; i < prepare.length; i++) {
                    if (prepare[i] == 0) {
                        isComplete = false;
                        break;
                    }
                }
                if (isComplete) {
                    clearInterval(waitInterval);
                    // div转canvas截图
                    let domElem;
                    domElem = document.getElementById(Name);
                    html2canvas(domElem, {
                        useCORS: true,
                        foreignObjectRendering: true,
                        allowTaint: false,
                        taintTest: true,
                        scale: 1
                    }).then((cnv) => {
                        let imgUrl = cnv.toDataURL("image/png"); // 将canvas转换成img的src流，base64
                        for (let i = 0; i < nodesToRecover.length; i++) {
                            nodesToRecover[i].parent.appendChild(nodesToRecover[i].child);
                        }
                        for (let i = 0; i < nodesToRemove.length; i++) {
                            nodesToRemove[i].parent.removeChild(nodesToRemove[i].child);
                        }
                        resolve(imgUrl);
                    });
                }
            }, 5);
        });
    }

    /* 下载图片的方法 */
    function download(url) {
        let a = document.createElement('a');
        a.style.display = 'none';
        document.body.appendChild(a);
        let triggerDownload = $(a).attr("href", url).attr("download", "order-1111111111.png");
        triggerDownload[0].click();
        document.body.removeChild(a)
    }
    //使用经纬度进行定位
    function setLatLonPosition() { //参数：经纬度
        if (x == undefined && y == undefined) {
            var x = 111;
            var y = 33;
            var convertor = new BMapGL.Convertor();
            // var point = '';
            if (x != '' && y != '') {
                var ggPoint = new BMapGL.Point(x, y);
                var pointArr = [];
                pointArr.push(ggPoint);
                //纠偏并定位
                convertor.translate(pointArr, COORDINATES_WGS84, COORDINATES_BD09, function(data) {
                    if (data.status === 0) {
                        var lon = parseFloat(data.points[0].lng.toFixed(6));
                        var lat = parseFloat(data.points[0].lat.toFixed(6));
                        var point = new BMap.Point(lon, lat);

                        map.centerAndZoom(point, 15);
                        map.clearOverlays();
                        // map.addOverlay(new BMap.Marker(point));

                        var marker = new BMap.Marker(point);
                        map.addOverlay(marker);
                        var info = "经度：" + x + ";纬度：" + y;
                        var label = new BMap.Label(info, {
                            offset: new BMap.Size(10, -10)
                        });
                        marker.setLabel(label); //添加百度label
                    }
                })
            }
        } else {
            var lon = x;
            var lat = y;
            var point = new BMap.Point(lon, lat);

            map.centerAndZoom(point, 15);
            map.clearOverlays();
            // map.addOverlay(new BMap.Marker(point));

            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            // var info = "经度：" + x + ";纬度：" + y;
            // var label = new BMap.Label(info, {
            //     offset: new BMap.Size(10, -10)
            // });
            // marker.setLabel(label); //添加百度label
        }

    }
</script>